<template>
  <div class="bpmn-previewer" v-loading="loading">
    <BpmnPresetViewer
        v-if="processInstanceId || processModelKey"
        ref="presetViewer"
        :theme="getTheme"
        local="zh_CN"
        translate-prefix=""
        :procInstId="processInstanceId"
        :modelKey="processModelKey"
        @viewer-init="handleViewerInit"
        @data-change="handleDataChange"
    />

  </div>
</template>

<script setup name="BpmnViewer">
import {BpmnPresetViewer} from '@/assets/bpmn/viewer/lib/bpmn-viewer.js';
import '@/assets/bpmn/viewer/lib/style.css';

const props = defineProps({
  modelKey: '',
  procInstId: ''
});

const loading = ref(false);
const bpmnViewer = ref(null);
const processInstanceId = ref('');
const processModelKey = ref('');
const getTheme = ref('light');

const handleViewerInit = (v) => {
  bpmnViewer.value = v;
}
const handleDataChange = () => {

}

if(!props.procInstId){
  watch(() => props.modelKey, val => {
    if (val) {
      loading.value = true;
      processModelKey.value = val;
      setTimeout(() => {
        loading.value = false;
      }, 100);
    }
  }, {immediate: true});
}

watch(() => props.procInstId, val => {
  loading.value = true;
  setTimeout(() => {
    processInstanceId.value = val;
    loading.value = false;
  }, 100);
}, {immediate: true});

</script>
<style lang="scss">
.bpmn-previewer {
  height: 100%;
}

body, html, #app {
  overflow: initial;
  width: initial;
}
div[id^="tippy-"] {
  z-index: 8888!important;
}
.arco-popover{
  z-index: 8889!important;
}
.bpmn-viewer__toolbar{
  display: none;
}
</style>
